import { ref } from 'vue'

const option = ref({}) as any;

const pieData = [
  {
    name: "楼宇负荷",
    value: Math.floor(Math.random() * 100 + 100),
  },
  {
    name: "微网",
    value: Math.floor(Math.random() * 100 + 100),
  },
  {
    name: "储能",
    value: Math.floor(Math.random() * 100 + 100),
  },
  {
    name: "灵活调节电源",
    value: Math.floor(Math.random() * 100 + 100),
  },
  {
    name: "综合能源",
    value: Math.floor(Math.random() * 100 + 100),
  },
];

const total = pieData.reduce((a, b) => {
  return a + b.value;
}, 0);
let seriesData: any = [];
pieData.forEach(r => {
  seriesData.push(r);
  seriesData.push({
    name: "",
    value: 15,
    tooltip: { show: false },
    itemStyle: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      color: "rgba(0, 0, 0, 0)",
      borderColor: "rgba(0, 0, 0, 0)",
      borderWidth: 0,
    },
  });
});

function setOption() {
  option.value = {
    color: ["#96B5FC", "#5F8CEF", "#F18A70", "#F4C594", "#E0E7FA"],
    title: {
      text: `{a|${total}}{b| MW}`,
      textStyle: {
        rich: {
          a: {
            color: "#FFFFFF",
            fontSize: "32",
          },
          b: {
            fontSize: "16",
            color: "#FFFFFF",
          },
        },
      },
      x: "36%",
      y: "48%",
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "交易品种收益",
        type: "pie",
        radius: ["40%", "60%"],
        center: ["50%", "50%"],
        avoidLabelOverlap: false,
        label: {
          position: "outside",
          color: "#E6F7FF",
          lineHeight: 18,
          formatter: params => {
            const { data } = params;
            return data.name;
          },
        },
        itemStyle: {
          borderColor: "transparent",
        },
        emphasis: {
          scaleSize: 10,
        },
        data: seriesData,
      },
      {
        name: "阴影圈",
        type: "pie",
        radius: ["0", "40%"],
        center: ["50%", "50%"],
        emphasis: {
          scale: false,
        },
        tooltip: {
          show: false,
        },
        itemStyle: {
          color: "rgba(204,225,255, 0.05)",
        },
        zlevel: 4,
        labelLine: {
          show: false,
        },
        data: [100],
      },
      {
        name: "阴影圈",
        type: "pie",
        radius: ["0", "30%"],
        center: ["40%", "50%"],
        emphasis: {
          scale: false,
        },
        tooltip: {
          show: false,
        },
        itemStyle: {
          color: "rgba(204,225,255, 0.07)",
        },
        zlevel: 4,
        labelLine: {
          show: false,
        },
        data: [100],
      },
    ],
  };
}

export default function useOption(): any[] {
  return [option, setOption];
}
